<template>
    <a-card class="custom-card" :bordered="false">
        <search-form ref="searchForm" :getDataList="getDataList" @searchOption="searchOption" @emitColumns="emitColumns" />
        <a-table :columns="columns"
                 :rowKey="row => row.%IsKey%"
                 :dataSource="dataSource"
                 :pagination="pagination"
                 :loading="loading"
                 @change="handleTableChange"
                 :rowSelection="{ onChange: onSelectChange }"
                 :bordered="true"
                 size="small">
            <template #bodyCell="{ column, record,index }">
                <template v-if="column.bind && column.bind.key">
                    <a-tag :color="getColors(record,column)">{{ getColumnText(column, record) }}</a-tag>
                </template>
                <template v-if="column.e_type == 'img'">
                    <img v-if="record[column.key]" :src="url+record[column.key]" style="max-width: 60px;height: auto;" />
                    <a-avatar v-else :size="64">
                        <template #icon>
                            <UserOutlined />
                        </template>
                    </a-avatar>
                </template>
                <template v-if="column.key == 'action'">
                    <a-button size="small" type="primary" @click="handleEdit(record.%IsKey%)">编辑</a-button>
                    <a-divider type="vertical" />
                    <a-button size="small" type="primary" danger @click="handleDelete([record.%IsKey%])">删除</a-button>
                </template>
            </template>
        </a-table>
    </a-card>
    <edit-form ref="editForm" :getDataList="getDataList" />
</template>

<script setup>
    import { ref, onMounted } from "vue";
    import { http } from '@/axios/'
    import { message } from "ant-design-vue";
    import EditForm from './components/EditForm.vue'
    import SearchForm from "./components/SearchForm.vue";
    import { columns, getDictonLibry, sorter } from './ranks.js'
    import { getColumnText, getColors } from '@/components/DynamicForm/index.js'

    const url = import.meta.env.VITE_APP_PublishRootUrl
    const pagination = ref({
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`
    })
    const queryParam = ref({ Query: [] })
    const selectedRowKeys = ref([])
    const loading = ref(false)
    const dataSource = ref([])
    getDictonLibry()
    onMounted(() => {
        getDataList()
    })



    const localGetTable = () => {
        const localTable = localStorage.getItem("%entityName%")
        if (localTable) {
            columns.value = JSON.parse(localTable).map(v => {
                return v.show && v
            }).filter((item) => item)
        } else {
            // columns.value = []
        }
    }
    localGetTable()
    const emitColumns = (data) => {
        columns.value = data.map(v => {
            return v.show && v
        }).filter((item) => item)
        getDataList()
    }

    function handleTableChange(page) {
        pagination.value = page
        getDataList()
    }
    function searchOption(data, arg) {
        let searchOptin = []
        Object.keys(data).map(key => {
            searchOptin.push({
                key,
                value: data[key] || ''
            })
        })
        queryParam.value = { Query: searchOptin, ...arg }
        getDataList()
    }
    async function getDataList() {
        loading.value = true
        try {
            const { Success, Data, Total, Msg } = await http.post("/%areaName%/%entityName%/GetDataList", {
                PageIndex: pagination.value.current,
                PageRows: pagination.value.pageSize,
                SortField: sorter.value.field || '%IsKey%',
                SortType: sorter.value.order,
                Search: queryParam.value,
            })
            loading.value = false
            if (Success) {
                dataSource.value = Data
                pagination.value = { ...pagination.value, total: Total }
            } else {
                message.warning(Msg)
            }
        } catch (error) {
            loading.value = false
            message.error("服务器异常!")
            console.log("[network error]:" + error.message)
        }
    }

    const searchForm = ref()

    function onSelectChange(rowKeys) {
        searchForm.value.delItem(rowKeys, null)
    }

    function handleDelete(params) {
        searchForm.value.delItem(params, 'del')
    }

    const editForm = ref()

    function handleEdit(id) {
        editForm.value.openForm(id)
    }
</script>